<template>
  <div class="number-range">
    <el-input
      v-model="from"
      type="number"
      size="small"
      :disabled="option.disabled"
      style="width:90px"
    />
    -
    <el-input
      v-model="to"
      type="number"
      size="small"
      :disabled="option.disabled"
      style="width:90px"
    />
  </div>
</template>
<script>
  export default {
    name: 'NumberRange',
    model: {
      prop: 'propValue',
      event: 'onChange',
    },
    props: {
      propValue: {
        type: Array,
        default: () => [],
      },
      option: {
        type: Object,
        default: () => ({}),
      },
      onChange: {
        type: Function,
        default: new Function()
      }
    },
    data() {
      const [from, to] = this.propValue || []
      return {
        from,
        to,
      }
    },
    watch: {
      propValue(v = []) {
        const [from, to] = v
        this.from = from
        this.to = to
      },
      from(v) {
        this.onValueChange([v, this.to])
      },
      to(v) {
        this.onValueChange([this.from, v])
      }
    },
    methods: {
      onValueChange([from, to]) {
        const f = from ? Number(from) : ''
        const t = to ? Number(to) : ''
        this.$emit('onChange', [f, t])
      },
    },
  }
</script>
<style scoped lang="scss">
  .number-range {
    display: flex;
    flex-wrap: nowrap;
    color: #CCCCCC
  }
</style>
